<template>
	<view class="submitted">
		<view class="content">
			<view class="typeTabs">
				<view :class="type === 2? 'active':'item'" @click="changeType(2)">自送收衣网点</view>
				<view :class="type === 1? 'active':'item'" @click="changeType(1)">预约上门取件</view>
			</view>
			<view class="address" @click="toAddress">
				<view style="display: flex;align-items: center;">
					<image style="width: 20px;margin-right: 5px;" mode="widthFix" src="../../static/dingwei.png"></image>
					<view v-if="!address.phone">请添加取送件地址</view>
					<view v-else style="color: #000;">
						<view>{{address.province+address.city+address.district+address.detail}}</view>
						<view style="margin-top: 5px;">{{address.name}} {{address.phone}}</view>
					</view>
				</view>
				<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
			</view>
			<view class="shops" v-if="type === 2">
				<view class="shopsTitle">
					<view>附近的洗衣店或收衣网点</view>
					<view v-if="store?.distance">距您{{store.distance}}</view>
				</view>
				<view class="shopsAddress" @click="toMap">
					<view style="display: flex;align-items: center;">
						<image style="width: 25px;height:25px;margin-right: 8px;" src="../../static/dingwei1.png"></image>
						<view v-if="store?.distance">
							<view>{{store.province+store.city+store.district+store.detail}}</view>
							<view style="font-size: 12px;color: #989898;margin-top: 4px;">衣物送洗前请折叠并做好简易包装</view>
						</view>
						<view v-else style="color: #989898;">请选择附近的洗衣店或收衣网点</view>
					</view>
					<image style="width: 20px;height:20px;margin: 0;" src="../../static/right.png"></image>
				</view>
			</view>
			<view class="time" v-if="type === 1">
				<DateTimePicker @getIntervalTimes="getTimes"></DateTimePicker>
			</view>
			<view class="goodsList">
				<view v-for="(item,index) in goodList" :key="index" class="goodsItem">
					<view style="display: flex;">
						<img style="width: 50px;height: 50px;border-radius: 4px;margin-right: 10px;" :src="item.image" alt="">
						<view style="height: 50px;color: #7c7c7c;">
							<view>{{item.name}}</view>
							<view style="margin-top: 5px;">×{{item.num}}</view>
						</view>
					</view>
					<view style="font-weight: bold;">￥{{item.price}}</view>
				</view>
				<view v-if="couponId" style="display: flex;justify-content: space-between;margin-top: 10px;font-size: 12px;">
					<view>优惠券金额</view>
					<view>-{{cut}}</view>
				</view>
			</view>
			<view class="coupon" v-if="coupon.length>0" @click="selectCoupon = true">
				<view style="display: flex;align-items: center;" >
					<img style="width: 25px;height: 25px;margin-right: 5px;" src="@/static/libao.png" alt="">
					<view v-if="couponName">{{couponName}}</view>
					<view v-else style="color: red;">共有优惠券{{coupon.length}}张可使用</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view v-if="couponId">已用券</view>
					<image style="width: 20px;margin: 0;height: 20px;margin-left: 6px;" src="../../static/right.png"></image>
				</view>
			</view>
			<view class="remark">
				<view class="title">订单备注</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
					<view>有配饰</view>
					<switch color="#2c6cf4" style="transform:scale(0.7)" :checked="isMark" @change="switchChange" />
				</view>
				<view v-if="isMark" class="inputStyle1">
					<input placeholder="请输入配饰内容" v-model="markValue" />
				</view>
				<view v-if="!isMark" class="inputStyle">
					<input placeholder="请输入配饰内容" v-model="markValue" disabled />
				</view>
				<view class="inputStyle1">
					<textarea style="width: 100%;" placeholder="如有其它特殊需求，可留言给服务人员" v-model="orderMark" />
				</view>
			</view>
		</view>
		<view class="bottomCard">
			<view class="apply">
				<radio color="#2c6cf4" style="transform:scale(0.7)" :checked="agreed" />我已阅读并同意 <view class="agreement" @click="toAgreement">《洗丫丫洗护协议》</view>
			</view>
			<view class="bottomBox">
				<view class="priceBox">
					<button open-type="contact" type="default" class="kefuClass">
						<img style="width: 25px;height: 25px;margin-right: 7px;" src="@/static/kefu.png" alt="">
					</button>
					<view>￥{{getAllPrice}}</view>
				</view>
				<view class="priceButton" @click="nextOrder">立即下单</view>
			</view>
		</view>
		<view class="payMethods" v-if="pay" @click="closeModal">
			<view class="payContent" @click.stop>
				<view style="font-size: 16px;font-weight: bold;">选择支付方式</view>
				<view style="color: #7c7c7c;margin: 10px 0 15px;font-size: 14px;">会员卡余额：￥{{vip_card_balance}}</view>
				<view>
					<radio-group @change="selectPay">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;align-items: center;">
								<radio color="#2c6cf4" :value="2" :checked="payType === 2">会员卡支付</radio>
								<!-- <view>会员卡支付</view> -->
							</view>
							<view style="display: flex;align-items: center;font-size: 14px;color: red;" @click="toVip" v-if="Number(vip_card_balance) < getAllPrice">
								<view style="margin-right: 5px;">余额不足,去充值</view>
								<image style="width: 20px;margin: 0;height: 20px;"  src="../../static/right.png"></image>
							</view>
						</view>
						<view style="display: flex;align-items: center;margin-top: 10px;">
							<radio color="#2c6cf4" :value="1" :checked="payType === 1" >微信支付</radio>
							<!-- <view>微信支付</view> -->
						</view>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="selectCoupon" v-if="selectCoupon" @click="closeCoupon">
			<view class="couponDetail" @click.stop>
				<view style="width: 100%;border: 1px solid #f2f2f2;text-align: center;padding: 10px;box-sizing: border-box;font-size: 14px;border-radius: 4px;" @click="couponId = '';couponName='';selectCoupon = false">不使用优惠券</view>
				<view v-for="(item,index) in coupon" :key="index" :class="item.id !== couponId ?'couponFor':'couponForActive'" @click="couponId = item.id;couponName=item.name;selectCoupon = false">
					<view class="couponItem">
						<image style="width: 30px;" src="@/static/youhuiquan.png" mode="widthFix"></image>
						<view class="itemText">
							<view>{{item.name}}</view>
							<view class="bottom">
								<view>有效期至：{{item.expire_at}}</view>
								<view>{{item.cate_limit === 1?' 全类目可用':''}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
	</view>
</template>

<script>
	import { submitOrder, stores, couponForGetUse, getUserInfo, orderPay, userAddress } from '@/api/home.js'
	import liuDeliveryTime from '@/uni_modules/liu-delivery-time/components/liu-delivery-time/liu-delivery-time.vue'
	import DateTimePicker from './DateSelect.vue';
	import DateTimePicker2 from './DateSelect2.vue'
	export default {
		components:{
			DateTimePicker,
			DateTimePicker2,
			liuDeliveryTime
		},
		data() {
			return {
				pay:false,
				payType:2,
				type: 2,
				agreed:true,
				isMark: false,
				ca_id:[],
				vip_card_balance:'0',
				markValue:'',
				orderMark:'',
				dayTime:'',
				address: {},
				store:{},
				sendStore:{},
				coupon:[],
				couponId:'',
				couponName:'',
				startTime:'',
				endTime:'',
				selectCoupon: false,
				goodList:[],
				cut:''
			}
		},
		computed:{
			getAllPrice () {
				let all = this.goodList.reduce((accumulator, currentValue) => (Number(currentValue.price) * currentValue.num) + accumulator, 0)
				let cut = 0
				if(this.couponId){
					let item = this.coupon.find(item=>{return item.id === this.couponId})
					cut = Number(item.cut)
					this.cut = cut
				}
				return (all - cut).toFixed(2);
			},
		},
		onLoad(options) {
			if(options.data){
				this.goodList = JSON.parse(options.data)
				let ids = []
				let total = 0
				this.goodList.map(item=>{
					ids.push(item.id)
					if(this.ca_id.indexOf(Number(item.ca_id))<0){
						this.ca_id.push(Number(item.ca_id))
					}
					total += Number(item.price) * item.num
				})
				let data = {
					commodityIds:ids,
					totalPay:total,
				}
				couponForGetUse(data).then(res=>{
					this.coupon = res.data
				})
			}
			uni.$on('getAddress', (data)=>{
				this.address = data
				this.getStore()
			})
			userAddress().then(res=>{
				if(res.data.length>0){
					this.address = res.data[0]
					this.getStore()
				}
			})
			uni.$on('dataFromBack', (params) => {
				if(this.type === 2) this.store = params
				if(this.type === 1) this.sendStore = params
			});
		},
		onShow() {
			getUserInfo().then(res=>{
				this.vip_card_balance = res.data.vip_card_balance
			})
			// const now = new Date();
			// this.startTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
			// this.endTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String((now.getHours()+1)).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
		},
		methods:{
			getTimes(e){
				console.log(e,'e')
				this.startTime = e.start
				this.endTime = e.end
			},
			switchChange(e){
				if(!e.target.value) this.markValue = ''
				this.isMark = e.target.value
			},
			changeType(e){
				if(e === 2){
					 this.startTime = ''
					 this.endTime = ''
				}
				this.type = e
			},
			selectPay(e){
				this.payType = Number(e.target.value)
			},
			closeCoupon() {
				this.selectCoupon = false
			},
			getStore(){
				stores({sendType: this.type, addressId: this.address.id,catId:this.ca_id}).then(res=>{
					res.data.map((item,index)=>{
						item.distance = Math.ceil(item.distance)>1000?(Math.ceil(item.distance) / 1000).toFixed(2)+'km':Math.ceil(item.distance)+'米'
					})
					if(this.type === 2) this.store = res.data[0]
					if(this.type === 1) this.sendStore = res.data[0]
				})
			},
			openTime() {
				this.$refs.chooseTime.open()
			},
			changeTime(e) {
				this.dayTime = e.value
			},
			toMap() {
				if(!this.address.id) return uni.showToast({
					title: '请先选择地址',
					icon:'none'
				})
				let data = {
					sendType: this.type,
					addressId: this.address.id,
					catId: this.ca_id,
				}
				uni.navigateTo({
					url:'/pages/mapMark/index?data='+JSON.stringify(data)
				})
			},
			closeModal() {
				this.pay = false
			},
			endChange(e){
				this.endTime = e.detail.value
			},
			startChange(e){
				this.startTime = e.detail.value
			},
			toAddress(){
				uni.navigateTo({
					url: '/pages/address/index?goBack=1'
				})
			},
			toVip() {
				uni.navigateTo({
					url:'/pages/vip/index'
				})
			},
			toAgreement() {
				uni.navigateTo({
					url:'/pages/agreement/index'
				})
			},
			nextOrder() {
				if(!this.address.id) return uni.showToast({
					title: '请添加取送件地址',
					icon:'none'
				})
				if(this.type === 1 && !this.startTime) return uni.showToast({
					title: '请选择上门取件时间',
					icon:'none'
				})
				if(!this.pay){
					if(Number(this.vip_card_balance) < this.getAllPrice){
						this.payType = 1
					}
					this.pay = true
					return
				}
				let data = {
					sendType: this.type,
					isJewelry: this.isMark ?1:0,
					jewelryRemark: this.markValue,
					remark: this.orderMark,
					addressId: this.address.id,
					username: this.type === 2?this.store?.username:'',
					commodityInfos:[],
					payType: this.payType,
					pickupAtLeft: this.startTime,
					pickupAtRight: this.endTime,
					couponId:this.couponId,
				}
				this.goodList.map(item=>{
					data.commodityInfos.push({cid:item.id,skuId:item.skuId,num:item.num})
				})
				submitOrder(data).then(res=>{
					if(res.code === 200) {
						if(this.payType === 1){
							orderPay({orderNo:res.data.orderNo,payType:this.payType}).then(rs=>{
								const data = rs.data
								wx.requestPayment({
									...data,
									success(res) {
										// 支付成功后的逻辑
										uni.showToast({
										  title: '支付成功',
										  icon: 'success'
										});
										uni.switchTab({
											url:'/pages/order/index'
										})
										uni.removeStorageSync('card')
									},
									fail(err) {
										console.log(err,'err')
										// 支付失败后的逻辑
										uni.showToast({
										  title: '支付失败',
										  icon: 'none'
										});
									}
								})
							})
						}else{
							uni.showToast({
								title: res.message,
								icon:'none'
							})
							uni.removeStorageSync('card')
							uni.switchTab({
								url:'/pages/order/index'
							})
						}	
					}else{
						console.log(res,'res')
						uni.showToast({
						  title: res.message,
						  icon: 'none'
						});
					}
				})
				console.log(data,'data')
			},
			formatDateTime(date) {
				// 格式化日期时间为YYYY-MM-DDTHH:mm:ss格式
				let year = date.getFullYear();
				let month = this.padStart(date.getMonth() + 1);
				let day = this.padStart(date.getDate());
				let hour = this.padStart(date.getHours());
				let minute = this.padStart(date.getMinutes());
				let second = this.padStart(date.getSeconds());
				return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
			},
			padStart(value) {
				return value.toString().padStart(2, '0');
			}
		}
	}
</script>

<style scoped lang="less">
	.kefuClass::after {
		border: none;
		height: 0!important;
	}
	.kefuClass {
		display: flex;
		align-items: center;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000;
		font-size: 14px;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}
	.submitted{
		height: 100vh;
		.bottomCard{
			height: calc(10vh - 10px);
			background-color: #fff;
			padding: 10px;
			.apply{
				display: flex;
				align-items: center;
				font-size: 12px;
				.agreement{
					color: #2c6cf4
				}
			}
			.bottomBox{
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				.priceBox{
					height: 36px;
					display: flex;
					align-items: center;
				}
				.priceButton{
					padding: 8px 20px;
					background-color: #2c6cf4;
					color: #fff;
					font-size: 14px;
					border-radius: 6px;
					height: 20px;
				}
			}
		}
		.selectCoupon{
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: rgba(0,0,0,0.3);
			height: 100%;
			display: flex;
			align-items: flex-end;
			.couponDetail{
				background-color: #fff;
				width: 100%;
				border-bottom: 1px solid #f2f2f2;
				padding: 15px;
				box-sizing: border-box;
				min-height: 350px;
			}
			.couponForActive{
				border: 1px solid #2c6cf4;
				border-radius: 4px;
				margin-bottom: 15px;
				margin-top: 10px;
				.buttonText{
					border-top: 1px solid #f5f5f5;
					color: #2c6cf4;
					text-align: center;
					padding: 10px 0;
					font-size: 14px;
				}
				.couponItem{
					display: flex;
					padding: 15px;
					.itemText{
						width: 100%;
						margin-left: 15px;
						.bottom{
							width: 100%;
							display: flex;
							font-size: 12px;
							color: #7c7c7c;
							margin-top: 15px;
							justify-content: space-between;
						}
					}
				}
			}
			.couponFor{
				border: 1px solid #f5f5f5;
				border-radius: 4px;
				margin-bottom: 15px;
				margin-top: 10px;
				.buttonText{
					border-top: 1px solid #f5f5f5;
					color: #2c6cf4;
					text-align: center;
					padding: 10px 0;
					font-size: 14px;
				}
				.couponItem{
					display: flex;
					padding: 15px;
					.itemText{
						width: 100%;
						margin-left: 15px;
						.bottom{
							width: 100%;
							display: flex;
							font-size: 12px;
							color: #7c7c7c;
							margin-top: 15px;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.payMethods{
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: rgba(0,0,0,0.3);
			height: calc(90vh - 10px);
			display: flex;
			align-items: flex-end;
			.payContent{
				background-color: #fff;
				width: 100%;
				border-bottom: 1px solid #f2f2f2;
				padding: 15px;
				box-sizing: border-box;
			}
		}
		.content{
			height: calc(90vh - 10px);
			overflow: hidden;
			overflow-y: auto;
			padding: 10px;
			box-sizing: border-box;
			.remark{
				background-color: #fff;
				border-radius: 4px;
				padding: 15px 10px;
				margin-top: 10px;
				font-size: 14px;
				.title{
					font-size: 14px;
					font-weight: bold;
				}
				.inputStyle{
					width: 100%;
					margin-top: 10px;
					background-color: #e4e4e4;
					border-radius: 4px;
					padding: 10px 10px;
					box-sizing: border-box;
					font-size: 12px;
				}
				.inputStyle1{
					width: 100%;
					margin-top: 10px;
					background-color: #fff;
					border: 1px solid #e4e4e4;
					border-radius: 4px;
					padding: 10px 10px;
					box-sizing: border-box;
					font-size: 12px;
				}
			}
			.coupon{
				background-color: #fff;
				border-radius: 4px;
				padding: 10px 8px;
				margin-top: 10px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.goodsList{
				background-color: #fff;
				border-radius: 4px;
				padding: 0 10px 15px;
				margin-top: 10px;
				font-size: 14px;
				display: flow-root;
				.goodsItem{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f2f2f2;
					padding-bottom: 15px;
					margin-top: 15px;
					
				}
				.goodsItem:nth-last-child(1){
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
			.time{
				background-color: #fff;
				border-radius: 4px;
				padding: 15px 10px;
				margin-top: 10px;
				font-size: 14px;
				.timeUp{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.shops{
				background-color: #fff;
				border-radius: 4px;
				padding: 15px 10px;
				margin-top: 10px;
				font-size: 14px;
				.shopsAddress{
					display: flex;
					align-items: center;
					margin-top: 10px;
					justify-content: space-between;
				}
				.shopsTitle{
					font-size: 12px;
					display: flex;
					justify-content: space-between;
				}
			}
			.address{
				background-color: #fff;
				border-radius: 4px;
				padding: 15px 10px;
				margin-top: 10px;
				font-size: 14px;
				display: flex;
				align-items: center;
				color: #989898;
				justify-content: space-between;
			}
			.typeTabs{
				display: flex;
				justify-content: space-between;
				.active{
					width: 49%;
					background-color: #2c6cf4;
					text-align: center;
					color: #fff;
					font-size: 12px;
					padding: 15px 0;
					border-radius: 4px;
				}
				.item{
					padding: 15px 0;
					border-radius: 4px;
					font-size: 12px;
					width: 49%;
					background: #fff;
					text-align: center;
				}
			}
		}
		
	}
</style>